<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>腾讯云互动课堂Demo</title>
  <script src="libs/thirdpart/vue.js"></script>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="libs/thirdpart/elementui/index.css">
  <!-- 引入组件库 -->
  <script src="libs/thirdpart/elementui/index.js"></script>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-tabs__content {
      /* padding: 0 !important;
      width: 100%;
      height: 100%;
      overflow: hidden; */
    }

    #app {
      display: flex;
      width: 100%;
      height: 100%;
    }

    .board-box {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .board-box .el-tabs__header {}

    .board-box .el-tabs__content {
      flex: 1;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="emptyBlock" v-bind:style="{width: videoSize + 'px'}"></div>
    <el-tabs class="board-box" type="border-card" style="display: none;box-sizing: border-box;"
      v-bind:style="{width: boardBoxWidth}" v-show="isShow">
      <el-tab-pane label="白板" style="height: 100%;">
        <el-container style="position: relative; height: 100%;">
          <el-header style="z-index:10;">
            <el-collapse accordion>
              <el-collapse-item title="常用操作">
                <el-row style="padding: 2px; margin: 2px;">
                  <el-col :span="8">
                    <el-checkbox @change="onSetDrawEnable" v-model.boolean="drawEnable">允许涂鸭</el-checkbox>
                  </el-col>
                  <el-col :span="9">
                    <el-button size="mini" @click="onUndo" :disabled="canUndo == 0" v-text="'撤销'"></el-button>
                  </el-col>
                  <el-col :span="7">
                    <el-button size="mini" @click="onRedo" :disabled="canRedo == 0" v-text="'重做'"></el-button>
                  </el-col>
                </el-row>
                <el-row style="padding: 2px; margin: 2px;">
                  <el-col :span="8">
                    <el-button size="mini" @click="addBoard" v-text="'新建白板'"></el-button>
                  </el-col>
                  <el-col :span="9">
                    <el-select style="width: 100px;" size="mini" placeholder="工具" v-model="toolType"
                      @change="onSetToolType">
                      <el-option label="画笔" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_PEN"></el-option>
                      <el-option label="直线" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_LINE"></el-option>
                      <el-option label="实心(椭)圆" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_OVAL_SOLID">
                      </el-option>
                      <el-option label="空心(椭)圆" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_OVAL">
                      </el-option>
                      <el-option label="实心矩形" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_RECT_SOLID">
                      </el-option>
                      <el-option label="空心矩形" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_RECT"></el-option>
                      <el-option label="文字输入" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_TEXT"></el-option>
                      <el-option label="橡皮擦" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_ERASER"></el-option>
                      <el-option label="激光笔" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_LASER"></el-option>
                      <el-option label="框选" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_RECT_SELECT">
                      </el-option>
                      <el-option label="点选" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_POINT_SELECT">
                      </el-option>
                      <el-option label="移动" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_ZOOM_DRAG">
                      </el-option>

                      <el-option label="鼠标" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_MOUSE"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="7">
                    <el-popover placement="bottom" width="150px">
                      <div style="text-align: center; margin: 0">
                        <el-row style="padding: 2px; margin: 2px;">
                          <el-col :span="12">
                            <p>笔刷颜色</p>
                          </el-col>
                          <el-col :span="12">
                            <el-color-picker @active-change="onSetBrushColor" v-model="brushColor" size="mini">
                            </el-color-picker>
                          </el-col>
                        </el-row>
                        <el-row style="padding: 2px; margin: 2px;">
                          <el-col :span="12">
                            <p>背景颜色</p>
                          </el-col>
                          <el-col :span="12">
                            <el-color-picker @active-change="onSetBackgroudColor" v-model="backgroundColor" size="mini">
                            </el-color-picker>
                          </el-col>
                        </el-row>
                        <el-row style="padding: 2px; margin: 2px;">
                          <el-col :span="12">
                            <p>文字颜色</p>
                          </el-col>
                          <el-col :span="12">
                            <el-color-picker @active-change="onSetTextColor" v-model="textColor" size="mini">
                            </el-color-picker>
                          </el-col>
                        </el-row>
                      </div>
                      <el-button slot="reference" size="mini">颜色设置</el-button>
                    </el-popover>
                  </el-col>
                </el-row>
                <el-row style="padding: 2px; margin: 2px;">
                  <el-col :span="8">
                    <el-button size="mini" @click="onDeleteBoard(-1)" v-text="'删除白板'"></el-button>
                  </el-col>
                  <el-col :span="9">
                    <el-select style="width: 100px;" size="mini" placeholder="工具" v-model="backgroundImage"
                      @change="onSetBackgroundImage">
                      <el-option label="美图1"
                        v-bind:value="'https://main.qcloudimg.com/raw/36d31e0d6f9d24a9b5727ab5e21b4b8c.jpg'">
                      </el-option>
                      <el-option label="美图2"
                        v-bind:value="'https://main.qcloudimg.com/raw/a748528fecffd13a466a3a6c23ad1f45.jpg'">
                      </el-option>
                      <el-option label="美图3"
                        v-bind:value="'https://main.qcloudimg.com/raw/5e3f50336b85071ef09affcd967e679d.jpg'">
                      </el-option>
                      <el-option label="美图4"
                        v-bind:value="'https://main.qcloudimg.com/raw/4a897d60a49ae211f6e492f6ebe8340f.jpg'">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="7">
                    <el-select style="width: 80px;" size="mini" @change="onSwitchFile" placeholder="切换">
                      <el-option v-for="file in fileInfoList" :key="file.fid" :label="file.title" :value="file" />
                    </el-select>
                  </el-col>
                </el-row>
                <el-row style="padding: 2px; margin: 2px;">
                  <el-col :span="8">
                    <el-button size="mini" @click="onclearDraws" v-text="'清空涂鸦'"></el-button>
                  </el-col>
                  <el-col :span="9">
                    <el-select style="width: 100px;" size="mini" placeholder="工具" v-model="backgroundImageH5"
                      @change="onSetBackgroundH5">
                      <el-option label="QQ" v-bind:value="'https://www.qq.com/'"></el-option>
                      <el-option label="腾讯云" v-bind:value="'https://cloud.tencent.com'"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="7">
                    <el-select style="width: 80px;" size="mini" @change="onDeleteFile" placeholder="删除">
                      <el-option v-for="file in fileInfoList" :key="file.fid" :label="file.title" :value="file" />
                    </el-select>
                  </el-col>
                </el-row>
                <el-row style="padding: 2px; margin: 2px;">
                  <el-col :span="8">
                    <el-button size="mini" @click="onClear" v-text="'清空白板'"></el-button>
                  </el-col>
                  <el-col :span="7">
                    <input id="file_input" hidden type="file" @change="uploadFile"
                      accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.ms-powerpoint, application/vnd.ms-excel">
                    <el-button size="mini" @click.native="()=>{document.getElementById('file_input').click();}">上传文件
                    </el-button>
                  </el-col>
                </el-row>
                <el-row style="padding: 2px; margin: 2px;">
                  <el-col :span="24">
                    <el-slider size="mini" @change="onSetScale" v-model="scaleSize" max='300'></el-slider>
                  </el-col>
                </el-row>
              </el-collapse-item>
            </el-collapse>
          </el-header>

          <el-main id="sketchpad" style="padding: 0; z-index:5; height: 100%;"></el-main>

          <el-footer style="height: 70px; bottom: 0px;">
            <el-pagination style="padding-top: 0px; padding-bottom: 0px;" :page-size="1" :pager-count="3"
              layout="total, prev, pager, next" :total.sync="boardData.total" :current-page.sync="boardData.current"
              @prev-click="prevBoard" @current-change="onGotoBoard" @next-click="nextBoard">
            </el-pagination>
          </el-footer>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="IM" style="height: 100%;">
        <el-container>
          <el-main>
            <div id="msg_box" class="im-log-box"
              style="position: relative; height: 20vh; max-height: 40vh; overflow-y: scroll;">
              <ul>
                <li v-for="msg in msgs">
                  <span class="send">{{msg.send}}</span>
                  <span class="content">{{msg.content}}</span>
                </li>
              </ul>
            </div>
            <div style="position: relative; margin-top: 5px; height: 30vh; overflow: hidden;">
              <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="消息内容">
                  <el-input v-model="imMsg.common.data" placeholder="text消息"></el-input>
                </el-form-item>
                <el-form-item label="接收人ID">
                  <el-input v-model="imMsg.common.toUser" placeholder="不填表示给群组发消息"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="sendMsg">发送消息</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-main>
        </el-container>

      </el-tab-pane>
    </el-tabs>
  </div>


  <link href="https://res.qcloudtiw.com/board/third/videojs/1.0.0/video-js.min.css" rel="stylesheet">
  <script src="https://res.qcloudtiw.com/board/third/videojs/1.0.0/video.min.js"></script>

  <!-- AXIOS SDK 白板SDK依赖axios-->
  <script src="https://res.qcloudtiw.com/thirdpart/axios/axios.min.js"></script>

  <!-- COS SDK -->
  <script src="./libs/cos-js-sdk-v5.min.js"></script>
  <!-- WebIM SDK -->
  <script src="./libs/tim-js.js"></script>
  <!-- 白板SDK -->
  <script src="https://res.qcloudtiw.com/board/2.5.0/TEduBoard.min.js"></script>

  <!-- TIC SDK 可根据开源代码自行编译TIC-->
  <script src="https://res.qcloudtiw.com/tic/2.5.1/TIC.min.js"></script>

  <script src="libs/thirdpart/purl.js"></script>
  <script src="libs/thirdpart/vconsole.min.js"></script>
  <script src="js/miniprogram.js"></script>
</body>

</html>